<!-- 
  * Copyright (c) 2022 iSoftStone Information Technology (Group) Co.,Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
<template>
	<view>
		<template>
			<view class="actricBox">
				<view class="title">{{data.title}}</view>
				<view class="selefMessage">
					<view class="left">
						<view class="avatarImg">
							<u-avatar class="avatarImg" :src="data.avatarUrl" shape="circle" :size="24"></u-avatar>
						</view>
						<text class="actricName">{{decodeURI(data.nickName?data.nickName:data.author)}}</text>
						<text class="actricTime">{{data.createTime}} {{data.seeNum?data.seeNum:0}}浏览</text>
					</view>
					<view class="right" v-if="isshowFans">
						<u-button @click="handelFans()" :type="!isFans?'primary':'info'" size="mini" shape="circle"
							:text="!isFans?'关注':'已关注'"></u-button>
					</view>
				</view>
				<view class="text">
					<u-read-more ref="uReadMore" showHeight="100">
						<rich-text :nodes="data.content" @load="load"></rich-text>
					</u-read-more>
				</view>
			</view>
			<!-- 	<view class="textAbout">相关文章</view>
			<actric-list v-if="datalist.total>0" :list="datalist" type="list" @loadMore="handelMore()"></actric-list>
			<empty-img v-else></empty-img> -->
			<view class="gridBox">
				<u-gap height="5" bgColor="#F1F3F5"></u-gap>
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(item,index) in gridList" :key="index">
						<view v-if="item.type!=3"  @click="handelGrid(index)">
							<u-icon :color="item.state?'#317AF7':'#ccc'" :customStyle="{paddingTop:20+'rpx'}"
								:name="item.name" size="48rpx"></u-icon>
							<text class="grid-text">{{item.num?item.num:0}}</text>
						</view>
						<button v-else open-type="share" border="false" @click="handelGrid(index)">
							<u-icon :color="item.state?'#317AF7':'#ccc'" :name="item.name" size="48rpx"></u-icon>
						</button>
						<text class="grid-text" style="margin-left: 0rpx;">{{item.num?item.num:0}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<u-modal :show="show" :showConfirmButton="true" :showCancelButton="true" confirmText="登录"
				confirmColor="#0A59F7;" cancelColor="#E84026;" @cancel="close()" @confirm="open()">
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</u-modal>
		</template>
	</view>
</template>

<script>
	import {
		usersave,
		getopenId,
		userLogin,
		getUserByOpenId,
		userEdit,
		actriclook,
		fansAdd,
		getfanslist,
		articleChange,
		delAppletConcern,
		getActricList
	} from '@/common/api.js';
	export default {
		props: {
			list: Array,
			type: String
		},
		data() {
			return {
				id: 0,
				isshowFans: false,
				gridList: [{
						name: 'star',
						num: 0,
						state: false,
						type: 2,
					},
					{
						name: 'thumb-up',
						num: 0,
						state: false,
						type: 1,
					},
					{
						name: 'share-square',
						num: 0,
						state: false,
						type: 3,
					},
				],
				isFans: false,
				data: {
					title: "",
					avatarUrl: "",
					nickName: "",
					author: "",
					createTime: "",
					seeNum: ""

				},
				datalist: {},
				query: {
					"pageNumber": 1,
					"pageSize": 5,
				},
				num: 1,
				userInfo: {},
				WxData: {
					nickName: "请登录",
					avatarUrl: "",
					state: "请登录"
				},
				show: false,
				content: "未登录，请先登录",
			}
		},
		onLoad: function(res) {
			console.log(res, 666);
			this.id = res.articleId
			this.userInfo = this.$store.state.$userInfo
		},
		//分享
		onShareAppMessage(res) {
			return {
				title: this.data.title,
				path: '/pages/componet/main/sharedetail/index?openId=' + this.$store.state.$userInfo.openId +
					'&articleId=' + (this.id - 0)+'&userId=' + this.$store.state.$userInfo.id,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onShow: function() {
			this.info()
		},
		methods: {
			info() {
				const data = {
					articleId: this.id - 0,
					openId: this.$store.state.$userInfo.openId,
				}
				console.log(data, 888)
				actriclook(data).then(res => {
					this.data = res
					console.log(res, "文章详情查询")
					if (res.iconNum) {
						this.gridList[1].num = res.iconNum
					}
					if (res.isCollection) {
						this.gridList[0].num = res.collectionNum
					}
					if (res.forwardNum) {
						this.gridList[2].num = res.forwardNum
					}
					if (res.isIcon === 1) {
						this.gridList[1].state = true
					}
					if (res.isCollection === 1) {
						this.gridList[0].state = true
					}
					this.load()
					this.findSelf()
					this.getActricList()
				})
			},
			getActricList() {
				this.query.title = this.data.title
				this.query.id = this.data.id
				getActricList(this.query).then(res => {
					this.datalist = res
				})
			},
			findSelf() {
				const data = {
					"concernOpenId": this.$store.state.$userInfo.openId,
					"beConcernOpenId": this.data.openId,
					"pageNumber": 0,
					"pageSize": 0,
					"type": 3
				}
				getfanslist(data).then(res => {
					console.log("res:粉丝数据", res)
					if (this.data.openId === this.$store.state.$userInfo.openId) {
						this.isshowFans = false
					} else {
						this.isshowFans = true
					}
					if (res.total > 0) {
						this.isFans = true
					}
				})
			},
			load() {
				this.$refs.uReadMore.init();
			},
			handelGrid(n) {
				const item = this.gridList[n]
				if (this.$store.state.$userInfo.openId) {
					//type:n===1点赞2收藏3转发，取消点赞，取消收藏
					let data = {
						openId: this.data.openId,
						articleId: this.data.id,
						type: item.type,
						sendOpenId: this.$store.state.$userInfo.openId,
						userId:this.$store.state.$userInfo.id
					}
					if (item.state && item.type === 2) {
						data.type = 5
						item.state = false
						item.num--
					} else if (item.state && item.type === 1) {
						data.type = 4
						item.state = false
						item.num--
					} else if (!item.state && item.type !== 3) {
						item.state = true
						item.num++
					} else if (item.type === 3) {
						item.num++
					}
					//点赞转发收藏接口
					articleChange(data).then(res => {
						console.log(data, 分享)
					})
				} else {
					this.show = true
				}
			},

			handelFans() {
				const data = {
					beConcernOpenId: this.data.openId,
					concernOpenId: this.$store.state.$userInfo.openId,
					type: 1
				}
				if (this.$store.state.$userInfo.openId) {
					if (this.isFans) {
						delAppletConcern(data).then(res => {
							this.isFans = !this.isFans
						})
					} else {
						fansAdd(data).then(res => {
							this.isFans = !this.isFans
						})
					}
				} else {
					this.show = true
				}
			},
			close() {
				this.show = false
			},
			open() {
				if (!this.$store.state.$userInfo.openId) {
					this.loginWx()
				} else if (!this.$store.state.$userInfo.phone) {
					this.$u.route({
						url: 'pages/componet/main/edit/edit'
					})
				}
				this.show = false
			},
			loginWx() {
				uni.getUserProfile({
					lang: 'zh_CN',
					desc: '用户登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						this.getOpenid(res)
					},
					// 失败回调
					fail: (err) => {
						// 弹出错误
						uni.showModal({
							content: '已拒绝小程序获取信息',
							showCancel: false
						})
					}
				});
			},
			getOpenid(res) {
				uni.login({
					success: (item) => {
						const data = {
							"code": item.code
						}
						getopenId(data).then(el => {
							if (el.openId) {
								res.userInfo.openId = el.openId
								this.WxData.avatarUrl = res.userInfo.avatarUrl
								this.WxData.nickName = res.userInfo.nickName
								this.WxData.openId = el.openId
								this.$store.commit("setUserInfo", res.userInfo)
								uni.setStorage({
									key: 'userInfo',
									data: res.userInfo,
									success: function() {
										console.log("保存登录信息")
									}
								});
								this.getUserByOpenId(el.openId)
							}
						})
					},
				});
			},
			getUserByOpenId(openId) {
				//根据openId 获取用户信息，有信息登录，没有信息新增用户信息
				const data = {
					openId: openId
				}
				getUserByOpenId(data).then(res => {
					if (res.userName) {
						res.username = res.userName
						this.WxData.id = res.id
						this.$store.commit("setUserInfo", res)
						this.userLogin(res)
					} else {
						this.userAdd()
					}
				})
			},
			userAdd() {
				let data = {
					openId: this.$store.state.$userInfo.openId,
					nickName: encodeURI(this.$store.state.$userInfo.nickName),
					avatarUrl: this.$store.state.$userInfo.avatarUrl,
					inviteOpenId:this.$store.state.inviteOpenId
				}
				usersave(data).then(res => {
					if (res) {
						res.openId = data.openId
						this.userLogin(res)
					}
				})
			},
			userLogin(data) {
				userLogin(data).then(res => {
					if (res.token) {
						this.$store.commit("setUserToken", res.token)
						this.userEdit()
					}
				})
			},
			userEdit() {
				let data = {
					openId: this.WxData.openId,
					nickName: encodeURI(this.WxData.nickName),
					avatarUrl: this.WxData.avatarUrl,
					id: this.WxData.id
				}
				userEdit(data).then(res => {
					if (res) {
						console.log(res)
					}
				})

			},
			// handelMore() {
			// 	this.query.pageSize = (this.num + 1) * 5
			// 	this.num++
			// 	this.info()
			// },
			showModalPhone() {
				const that = this
				uni.showModal({
					content: "请完善您的个人信息",
					cancelText: "再想想",
					confirmText: "去编辑",
					success: function(res) {
						if (res.confirm) {
							that.$u.route({
								url: 'pages/componet/main/edit/edit'
							})
						}
					}
				})
			},
		},
	}
</script>
<style>
	.actricBox {
		margin-top: 2rpx !important;
		padding: 16rpx 24rpx !important;
	}

	.actricBox .text {
		line-height: normal !important;
	}
</style>
<style lang="scss" scoped>
	.textAbout {
		height: 96rpx;
		font-size: 32rpx;
		line-height: 96rpx;
		margin-top: 10px;
		background: #fff;
		padding: 0px 12px;
	}

	.gridBox {
		position: fixed;
		width: 100%;
		height: 120rpx;
		bottom: 0;
		left: 0;
		z-index: 99;
		background: #FFFFFF;

		.grid-text {
			font-size: 22rpx;
			color: rgba(0, 0, 0, 0.5);
			margin-top: 10rpx;
			margin-left: 18rpx;
		}

		button {
			margin-top: -16rpx;
			background-color: #FFFFFF;
		}

		button::after {
			border: none;
			height: 100%;

		}

		input {
			outline: none;
			border: none;
			list-style: none;
		}
	}

	.actricBox {
		background: #fff;
		margin-top: 8px;
		padding: 12px;

		.title {
			font-family: HarmonyHeiTi-Medium;
			font-size: 36rpx;
			color: #000000;
			font-weight: bold;
			line-height: 50px;
		}

		.text {
			font-family: HarmonyHeiTi;
			font-size: 12px;
			color: #9E9E9E;
			font-weight: 400;
			line-height: 20px;
		}

		.selefMessage {
			width: 100%;
			flex-direction: row;
			flex-wrap: wrap;
			display: flex;
			position: relative;
			line-height: 40px;

			&.self {
				line-height: 25px;

				.left {
					width: 70%;

					.actricTime {
						padding-right: 10px;
						padding-left: 0;
					}
				}

				.right {
					width: 30%;
				}
			}

			.left,
			.right {
				position: relative;
				height: 100rpx;
			}

			.left {
				height: 100rpx;
				position: relative;
				width: 500rpx;

				.avatarImg {
					position: relative;
					top: 6px;
					width: 48rpx;
					height: 48rpx;
				}

				.actricName {
					position: absolute;
					font-family: HarmonyHeiTi;
					font-size: 14px;
					color: #000000;
					font-weight: 400;
					top: -5px;
					left: 80rpx;
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
				}

				.actricTime {
					font-family: HarmonyHeiTi;
					font-size: 12px;
					color: #999999;
					font-weight: 400;
					position: absolute;
					top: 15px;
					width: 100rpx;
					left: 80rpx;
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
				}
			}

			.right {
				position: absolute;
				top: 0;
				right: 0;

			}

		}

	}
</style>
